!<template>
    <div>
        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片试图区 -->
        <el-card>
            <el-row>
                <el-col >
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格区域 -->
            <!-- 分类名称 -->
            <!-- data:表格各行的数据 -->
            <!-- columns:表格各列的配置（具体见下文：Columns Configs） -->
            <!-- selection-type:是否为多选类型表格 -->
            <!-- expand-type :是否为展开行类型表格-->
            <!-- show-index：是否显示表头 -->
            <tree-table 
                class="treeTable"
                :data="catelist"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                show-index
                index-text="#"	
                border
            >

            <!-- 自定义的模板:名称是isok..是否有效 -->
            <template slot="isok" slot-scope="scope"> 
                
                <i 
                    class="el-icon-success" 
                    v-if="scope.row.cat_deleted === false"
                    style="color:lightgreen"
                ></i>
                <i 
                    class="el-icon-error" v-else
                    style="color:red"
                ></i>
            </template>

            <!-- 排序 -->
            <template slot="order" slot-scope="scope">
                <el-tag type="" size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
                <el-tag type="warning" size="mini" v-else>三级</el-tag>
            </template>

            <!-- 操作 -->
            <!-- slot-scope="scope" -->
            <template slot="opt" >
                <el-button 
                    type="primary" 
                    icon="el-icon-edit" 
                    size="mini"
                >编辑</el-button>

                <el-button 
                    type="danger" 
                    icon="el-icon-delete" 
                    size="mini"
                >删除</el-button>
            </template>



            </tree-table>


            <!-- 分页区域 -->
            <!-- 
                页面刷新,默认显示的是2条数据
                @size-change：每页显示条数改变触发的事件
                @current-change:页码改变触发的事件
                current-page: 当前页数
                page-sizes：每页显示个数选择器的选项设置
                page-size：每页显示条目个数
                layout：组件布局，子组件名用逗号分隔
                total：总条目数
             -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[2, 5, 8, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </el-card>


        <!-- 添加分类的对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCateDialogVisible"
            width="50%"
            @close="addCateDialogClosed"
        >
            <!-- 添加分类的表单 -->
            <span>
                <el-form 
                    :model="addCateForm" 
                    :rules="addCateFormRules" 
                    ref="addCateFormRef" 
                    label-width="100px"
                >

                    <!-- 分类名称 -->
                    <el-form-item label="分类名称：" prop="cat_name">
                        <el-input v-model="addCateForm.cat_name"></el-input>
                    </el-form-item>

                    <!-- 父级分类 -->
                    <el-form-item label="父级分类">

                        <!-- v-model:级联选择器选中的值,必须是数组 -->
                        <!-- options:级联选择器数据源 -->
                        
                        <!-- prop:配置选项(注意props用法)
                           expandTrigger='hover':次级菜单的展开方式
                           clearable:是否支持清空选项
                           change-on-select：是否支持子父节点互不关联，
                           改成了props里checkStrictly 
                        -->
                        <el-cascader
                            v-model="selectedKeys"
                            :options="parentCateList"
                            :props=" cascaderProps "
                            clearable
                            filterable
                            
                            @change="prantCateChanged"
                        >
                            
                        </el-cascader>
                    </el-form-item>

                </el-form>
            </span>


            <!-- 底部的取消和确定按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>

        </el-dialog>
    </div>
</template>

<script>
    export default {

        created() {
            this.getCateList();
        },

        data() {
            return {

                //getCateList接口的查询条件
                queryInfo:{
                    //1，2，3 分别表示显示一层二层三层分类列表
                    //【可选参数】如果不传递，则默认获取所有级别的分类 |
                    type:3,
                    pagenum:1,  //当前页数
                    pagesize:5,//每页显示条数
                },


                //商品分类的数据列表，默认为空
                catelist:[],

                //总数居条数
                total:0,

                //为table指定列的定义
                columns:[
                    {
                        //列标题名称
                        label:'分类名称',
                        //对应列内容的属性名:返回的数据里面的cat_name
                        prop:"cat_name",
                    },
                    {
                        //列标题名称
                        label:'是否有效',

                        //表示讲当前列定义为模板列
                        type:"template",
                        //表示当前这一列的模板名称
                        template:'isok',
                    },
                    {
                        //列标题名称
                        label:'排序',

                        //表示讲当前列定义为模板列
                        type:"template",
                        //表示当前这一列的模板名称
                        template:'order',
                    },
                    {
                        //列标题名称
                        label:'操作',

                        //表示讲当前列定义为模板列
                        type:"template",
                        //表示当前这一列的模板名称
                        template:'opt',
                    },

                ],


                //控制添加分类对话框的显示和隐藏
                addCateDialogVisible:false,

                //添加分类的表单数据对象
                addCateForm:{
                    //将要添加分类的名称
                    cat_name:"",
                    //父级分类的id
                    cat_pid:0,
                    //分类的等级,默认要添加的是1及分类
                    cat_level:0,
                },

                //添加分类：父级分类列表
                parentCateList:[],

                //添加分类:指定级联选择器的配置对象
                cascaderProps:{

                    //指定选项的值为选项对象的某个属性值(让id当成选中的value值)
                    value:"cat_id",

                    //指定选项标签为选项对象的某个属性值(展示给用户看的选项值)
                    label:"cat_name",

                    //指定选项的子选项为选项对象的某个属性值
                    children:"children",

                    //次级菜单的展开方式
                    expandTrigger:"hover",

                    //父子节点互补关联，可以单独选中父节点
                    //  (和change-on-select一样功能)
                    checkStrictly:true,
                },

                //添加分类：v-model绑定的值，选中的父级分类的Id数组
                selectedKeys:[],



                //添加分类表单的验证规则
                addCateFormRules:{
                    cat_name:[
                        {
                            required:true,
                            message: '请输入分类名称',
                            trigger:'blur'
                        },
                    ]
                }



                
            }
        },

        methods: {

            //获取商品分类的数据列表
            async getCateList(){
                const {data:res} = await this.$http.get("categories",{params:this.queryInfo});
                if(res.meta.status !==200){
                    return this.$message.error("获取商品分类的数据列表失败");
                }
                // console.log(res.data);
                this.catelist = res.data.result;
                this.total =res.data.total;
            },


            //监听pagesize事件,每页显示多少条下拉框改变时触发
            handleSizeChange(newSize){
                // console.log(newSize);
                //newSize:改变后的条数
                this.queryInfo.pagesize = newSize;
                this.getCateList();

            },

            //监听页码改变事件 
            handleCurrentChange(newSize){
                // console.log(newSize);//传的页码过来
                this.queryInfo.pagenum = newSize;
                this.getCateList();

            },

            //显示和隐藏添加分类对话框 
            showAddCateDialog(){
                //先获取父级分类的数据列表
                this.getParentCateList();

                //在展示添加分类对话框
                this.addCateDialogVisible =true;
            },

            //获取父级分类的数据列表
            async getParentCateList(){
                const {data:res} = await this.$http.get("/categories",{
                    params:{type:2,}
                })

                if(res.meta.status !== 200){
                    return this.$message.error("获取父级分类数据失败");
                }

                // console.log(res.data);//获取到的数据列表
                this.parentCateList = res.data;

            },

            //选择项发生改变触发的值
            prantCateChanged(){
                // console.log(this.selectedKeys);//输出的选中项的id

                //如果selectedKeys数据中length大于0，则证明选中了父级
                // 分类，反之，则没有选中任何父级分类

                if(this.selectedKeys.length >0){
                    //父级分类的Id:是选中的下拉菜单的最后一项
                    this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1];
                    //当前分类的等级
                    this.addCateForm.cat_level = this.selectedKeys.length;
                    return;
                }else{
                    //如果没有选择下拉框,cat_pid=0代表没有父id
                    this.addCateForm.cat_pid = 0;
                    //当前分类的等级,(等级0代表1级分类，共123三种等级)
                    this.addCateForm.cat_level = 0;
                }

            },

            //点击按钮，添加新的分类
            addCate(){

                // console.log(this.addCateForm);

                this.$refs.addCateFormRef.validate(async valid =>{
                    if(!valid)return;
                    const {data:res} =await this.$http.post("categories",this.addCateForm);

                    // console.log(res);
                    if(res.meta.status !==201){
                        return this.$message.error("添加数据失败");
                    }
                    this.$message.success("添加分类成功");
                    this.getCateList();
                    this.addCateDialogVisible = false;
                })
            },

            //监听对话框的关闭事件
            addCateDialogClosed(){
                //重置添加分类对话框表单
                this.$refs.addCateFormRef.resetFields();

                //但是选择框重置不了，需要手动清空数据
                this.selectedKeys=[];
                this.addCateForm.cat_id = 0;
                this.addCateForm.cat_level = 0;
            },

            
        },

        
        
    }
</script>

<style lang="less" scoped>

.treeTable{
    margin-top: 15px;
}

.el-cascader{
    width: 100%;
}

</style>